<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>零钱理财</title>
  <!-- 引入bootstrap样式 -->
  <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">
  <!--图标库-->
  <link th:href="@{/lyear/css/materialdesignicons.min.css}" rel="stylesheet" type="text/css" />
  <!--自定义样式-->
  <link href="../lyear/css/style.min.css" th:href="@{/lyear/css/style.min.css}" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="lyear-layout-web">
    <div class="lyear-layout-container">
      <!--左侧导航-->
      <div th:replace="user/common/leftbar::#leftbaraside"></div>
      <!--头部信息-->
      <div th:replace="user/common/topbar::#topbarheader"></div>

      <!--页面主要内容-->
      <main class="lyear-layout-content">
        <div class="container-fluid">
          <div class="row">
            <div class="col-lg-12">
              <div class="card">
                <div class="card-header">
                  <h4>零钱理财</h4>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table table-hover">
                      <thead>
                        <tr>
                          <th>序号</th>
                          <th>产品名称</th>
                          <th>起投金额</th>
                          <th>起投时间</th>
                          <th>投资期限</th>
                          <th>预期收益</th>
                          <th>实际收益</th>
                          <th>总收益</th>
                          <th>平均收益率</th>
                          <th>投资状态</th>
                          <th>相关操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr th:if="${changeMoneyList.isEmpty()}">
                          <td colspan="11">暂无零钱理财产品</td>
                        </tr>
                        <tr th:each="changeMoney,stat:${changeMoneyList}">
                          <td th:text="${stat.count}"></td>
                          <td th:text="${changeMoney.changeMoney.name}"></td>
                          <td th:text="${changeMoney.changeMoney.invesmoney}+'元'"
                            th:attr="data-invesmoney=${changeMoney.changeMoney.invesmoney}"></td>
                          <td th:text="${#dates.format(changeMoney.starttime, 'yyyy-MM-dd')}"
                            th:attr="data-starttime=${changeMoney.starttime.time}"></td>
                          <td th:text="${changeMoney.changeMoney.investerm}"
                            th:attr="data-investerm=${changeMoney.changeMoney.investerm}"></td>
                          <td th:text="${changeMoney.profit}+'元'" th:attr="data-profit=${changeMoney.profit}"></td>
                          <td class="actual-profit">计算中...</td>
                          <td class="total-profit">计算中...</td>
                          <td th:text="${#numbers.formatPercent(changeMoney.averyield,2,2)}"></td>
                          <td th:switch="${changeMoney.status}">
                            <span th:case="1">持有中</span>
                            <span th:case="2">已失效</span>
                            <span th:case="3">已撤销</span>
                          </td>
                          <td>
                            <div class="btn-group">
                              <a class="btn btn-xs btn-default"
                                th:href="@{/user/revokeUserChangeMoney(id=${changeMoney.id})}" title="撤销"
                                data-toggle="tooltip">
                                <i class="mdi mdi-window-close"></i>
                              </a>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-12">
              <div class="card">
                <div class="card-header">
                  <h4>可投资零钱理财产品</h4>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table table-hover">
                      <thead>
                        <tr>
                          <th>序号</th>
                          <th>产品名称</th>
                          <th>七日年化收益率</th>
                          <th>每万元收益</th>
                          <th>投资期限</th>
                          <th>起投金额</th>
                          <th>相关操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr th:if="${allChangeMoneyList.isEmpty()}">
                          <td colspan="7">暂无可投资零钱理财产品</td>
                        </tr>
                        <tr th:each="changeMoney,stat:${allChangeMoneyList}">
                          <td th:text="${stat.count}"></td>
                          <td th:text="${changeMoney.name}"></td>
                          <td th:text="${#numbers.formatPercent(changeMoney.annualincome,2,4)}"></td>
                          <td th:text="${changeMoney.peiincome}+'元'"></td>
                          <td th:text="${changeMoney.investerm}"></td>
                          <td th:text="${changeMoney.invesmoney}+'元'"></td>
                          <td>
                            <div class="btn-group">
                              <a class="btn btn-xs btn-default"
                                th:href="@{/user/buyUserChangeMoney(id=${changeMoney.id})}" title="购买"
                                data-toggle="tooltip">
                                <i class="mdi mdi-cart-plus"></i>
                              </a>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <!--End 页面主要内容-->
    </div>
  </div>

  <!-- 引入jQuery和bootstrap的js -->
  <script th:src="@{/js/jquery.js}"></script>
  <script th:src="@{/bootstrap/js/bootstrap.js}"></script>
  <!--滚动条插件-->
  <script th:src="@{/lyear/js/perfect-scrollbar.min.js}"></script>
  <!--自定义js脚本-->
  <script th:src="@{/lyear/js/main.min.js}"></script>

  <!-- 计算实际收益和总收益的脚本 -->
  <script>
    /**
     * 解析投资期限字符串，返回天数
     * @param {string} investTerm - 投资期限字符串，如"30天"、"3个月"
     * @return {number} 投资期限天数
     */
    function parseInvestTerm(investTerm) {
      if (investTerm.includes('天')) {
        return parseInt(investTerm);
      } else if (investTerm.includes('个月')) {
        // 简化处理，按30天/月计算
        return parseInt(investTerm) * 30;
      } else if (investTerm.includes('年')) {
        return parseInt(investTerm) * 365;
      }
      return parseInt(investTerm); // 默认按天数处理
    }

    /**
     * 计算实际收益和总收益
     * 实际收益公式: 实际收益 = (当前时间 - 投资开始时间) / 投资期限 × 预期收益
     * 总收益公式: 总收益 = (当前时间 - 投资开始时间) / 投资期限 × 收益
     */
    function calculateProfits() {
      const now = new Date().getTime();

      $('.actual-profit').each(function (index) {
        const row = $(this).closest('tr');
        const startTime = parseInt(row.find('td:eq(3)').attr('data-starttime'));
        const investTerm = row.find('td:eq(4)').attr('data-investerm');
        const profit = parseFloat(row.find('td:eq(5)').attr('data-profit'));
        const investMoney = parseFloat(row.find('td:eq(2)').attr('data-invesmoney'));

        // 计算投资天数
        const investTermDays = parseInvestTerm(investTerm);

        // 计算已投资的毫秒数
        const investedMillis = now - startTime;

        // 计算已投资的天数
        const investedDays = investedMillis / (1000 * 60 * 60 * 24);

        // 计算投资时间比例(不超过1)
        const timeRatio = Math.min(1.0, investedDays / investTermDays);

        // 计算实际收益
        const actualProfit = (profit * timeRatio).toFixed(2);

        // 计算总收益 (包括本金)
        const totalProfit = (parseFloat(actualProfit) + investMoney).toFixed(2);

        // 更新显示
        $(this).text(actualProfit + '元');
        row.find('.total-profit').text(totalProfit + '元');
      });
    }

    // 页面加载完成后计算收益
    $(document).ready(function () {
      calculateProfits();

      // 每分钟更新一次收益
      setInterval(calculateProfits, 60000);
    });
  </script>
</body>

</html>